import { ref, onMounted } from "vue";

export const useNavBarHeight = () => {
  const SYSTEM_INFO = uni.getSystemInfoSync();
  let BUTTON_INFO;

  let barHeight = ref(0);
  let fillHeight = ref(0);
  let sysBarHeight = ref(0);
  onMounted(() => {
    sysBarHeight.value = SYSTEM_INFO.statusBarHeight;
    if (typeof uni?.getMenuButtonBoundingClientRect === "function") {
      const BUTTON_INFO = uni.getMenuButtonBoundingClientRect();
      const top = BUTTON_INFO.top;
      const height = BUTTON_INFO.height;
      const gap = top - SYSTEM_INFO.statusBarHeight;

      barHeight.value = height + gap * 2;

      fillHeight.value =
        top - SYSTEM_INFO.statusBarHeight + height + barHeight.value;
    }
  });

  return {
    barHeight,
    fillHeight,
    sysBarHeight,
  };
};
